<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>

		<view class="form">
			<view class="header">
				<view class="title">负责人信息</view>
			</view>
			<view class="item">
				<view class="label">证件类型</view>
				<view class="value">
					<uni-data-select @change="onChangeCertificate" v-model="form.certificate_type"
						:localdata="certificate"></uni-data-select>
					</u--input>
				</view>
			</view>
			<view class="item">
				<view class="label">身份证正面</view>
				<view class="value">
					<u-upload :fileList="photo_front" @afterRead="afterRead" @delete="deletePic" name="photo_front"
						:multiple="false" :maxCount="1"></u-upload>
				</view>
			</view>
			<view class="item">
				<view class="label">身份证反面</view>
				<view class="value">
					<u-upload :fileList="photo_back" @afterRead="afterRead" @delete="deletePic" name="photo_back"
						:multiple="false" :maxCount="1"></u-upload>
				</view>
			</view>
			<view class="item">
				<view class="label">姓名</view>
				<view class="value"><u--input placeholder="请输入负责人姓名" border="surround" v-model="form.name"></u--input>
				</view>
			</view>
			<view class="item">
				<view class="label">证件号码</view>
				<view class="value"><u--input placeholder="请输入负责人证件号码" border="surround" maxlength='18'
						v-model="form.certificate_number"></u--input>
				</view>
			</view>

			<view class="item">
				<view class="label">证件有效期</view>
				<view class="value">
					<u-radio-group v-model="radiovalue" placement="row" @change="groupChange">
						<u-radio :customStyle="{marginLeft:'20rpx'}" v-for="(item, index) in radiolist" :key="index"
							:label="item.name" :name="item.value">
						</u-radio>
					</u-radio-group>
				</view>
			</view>

			<view class="item">
				<view class="label">证件起始日期</view>
				<view class="value">
					<uni-datetime-picker type="date" :clear-icon="false"
						v-model="form.certificate_validity_date_start" />
				</view>
			</view>

			<view class="item" v-if='radiovalue==1'>
				<view class="label">证件终止日期</view>
				<view class="value">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="form.certificate_validity_date_end" />

				</view>
			</view>

			<view class="item">
				<view class="label">电话</view>
				<view class="value"><u--input maxlength='11' placeholder="请输入电话" border="surround"
						v-model="form.mobile"></u--input>
				</view>
			</view>

			<view class="item">
				<view class="label">邮箱</view>
				<view class="value"><u--input placeholder="请输入邮箱" border="surround" v-model="form.email"></u--input>
				</view>
			</view>
			<view class="item">
				<view class="label">应急联系</view>
				<view class="value"><u--input placeholder="请输入应急联系人手机号" border="surround" maxlength='11'
						v-model="form.emergency_contact"></u--input>
				</view>
			</view>

			<view class="item">
				<view class="label">授权书</view>
				<view class="value">
					<u-upload :fileList="letter" @afterRead="afterReadLetter" @delete="deletePic"
						name="authorization_letter" :multiple="false" :maxCount="1"></u-upload>
					<view style='font-size: 12px;color: #dd6161;'>当主体负责人不是法人时需要主体负责人授权书</view>
				</view>
			</view>
		</view>

		<view class="form">
			<view class="header">
				<view class="title">附属信息<span class="small">（非个人备案，且主体负责人不是法人时，必填）</span></view>
			</view>
			<view class="item">
				<view class="label">法人代表姓名</view>
				<view class="value"><u--input placeholder="请输入法人代表姓名" border="surround"
						v-model="form.legal_person_name"></u--input>
				</view>
			</view>
			<view class="item">
				<view class="label">法人证件号码</view>
				<view class="value"><u--input placeholder="请输入法人证件号码" border="surround"
						v-model="form.legal_person_certificate_number"></u--input>
				</view>
			</view>
		</view>

		

		<view class="submit" @click="onUpdateCharge">
			<view class="btn">
				<u-button shape="circle" type="primary" text="更新信息"
					color="linear-gradient(to right, #2979ff, #2b85e4)"></u-button>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		upload
	} from "@/api/system.js";
	import {
		subjectTypes
	} from "@/api/subject.js";
	import {
		update,
		detail
	} from "@/api/charge.js";
	import {
		detail as appletDetail,
		modify
	} from '@/api/applet.js';
	import tkiTree from "@/components/LinK9711-tree/LinK9711-tree.vue"
	export default {
		components: {
			tkiTree
		},
		data() {
			return {
				
				letter: [],
				temp: [],
				radiolist: [{
						name: '定期',
						value: 1
					},
					{
						name: '长期',
						value: 2
					}
				],
				radiovalue: 1,
				show: false,
				is_start_picker: false,
				photo_back: [],
				photo_front: [],
				applet_id: '',
				certificate: [],
				nature_value: 5,
				applet: {},
				service_tree: [],
				form: {
					id: '',
					// 负责人名称
					name: '',
					// 负责人电话
					mobile: '',
					// 负责人邮件
					email: '',
					// 负责人紧急联系方式
					emergency_contact: '',
					// 负责人证件类型
					certificate_type: '',
					// 负责人证件号码
					certificate_number: '',
					// 负责人证件有效开始时间
					certificate_validity_date_start: '',
					// 负责人证件有效结束时间
					certificate_validity_date_end: '',
					// 负责人证件照正面
					certificate_photo_front: '',
					// 负责人证件照背面
					certificate_photo_back: '',
					// 法人姓名
					legal_person_name: '',
					// 法人证件号
					legal_person_certificate_number: '',
					// 授权书id
					authorization_letter: ''
				}
			};
		},
		onLoad(options) {
			let _this = this
			if (options.id) {
				_this.form.id = options.id
			}
			if (options.applet_id) {
				_this.applet_id = options.applet_id
			}
			// if (options.nature_value) {
			// 	_this.nature_value = options.nature_value
			// }
			_this.onCertificateTypes()
			_this.onGetDetail()
			_this.getAppletDetail()
		},
		methods: {
			groupChange(val) {
				let _this = this
				if (val == 2) {
					_this.form.certificate_validity_date_end = '长期'
				} else {
					_this.form.certificate_validity_date_end = ''
				}
			},
			serviceTreeConfirm(data) {
				let _this = this
				let arr = []
				let index = 0
				let service_content_types_name = ""
				for (let i in data) {
					if (data[i].parent_type == 0) {
						continue;
					}
					arr[index] = data[i].type
					service_content_types_name += data[i].name + ' - '
					index++;
				}
				if (arr.length > 5) {
					_this.$refs.uToast.show({
						type: 'error',
						message: "服务类型最多5个",
						complete() {

						}
					})
					return false;
				}

				_this.applet.service_content_types = arr
				_this.applet.service_content_types_name = service_content_types_name

				modify(_this.applet).then(res => {
					_this.getAppletDetail()
				}).catch(err => {

				})
				_this.$refs.tkitree._hide()
				console.log(arr)
			},
			onGetService(applet_id) {
				let _this = this
				_this.applet_id = applet_id
				subjectTypes({
					id: applet_id,
					type: 'serviceContentTypes'
				}).then(res => {
					console.log(res)
					_this.service_tree = res.data
					_this.$refs.tkitree._show()
				}).catch(err => {

				})
			},
			//获取小程序详情
			getAppletDetail() {
				let _this = this
				appletDetail({
					id: _this.applet_id
				}).then(res => {
					_this.applet = res.data
				})
			},
			onGetDetail() {
				let _this = this
				detail({
					id: _this.form.id
				}).then(res => {
					_this.form = res.data
					if (_this.form.certificate_photo_back_url) {
						_this.photo_back = [{
							url: _this.form.certificate_photo_back_url
						}]
					}
					if (_this.form.certificate_photo_front_url) {
						_this.photo_front = [{
							url: _this.form.certificate_photo_front_url
						}]
					}
					if (_this.form.authorization_lette_url) {
						_this.letter = [{
							url: _this.form.authorization_lette_url
						}]
					}
					if (_this.form.certificate_validity_date_end == '长期') {
						_this.radiovalue = 2
					}
				}).catch(err => {

				})
			},
			onUpdateCharge() {
				let _this = this
				update(_this.form).then(res => {
					if (res.code == 200) {
						_this.$refs.uToast.show({
							type: 'success',
							message: res.msg,
							complete() {
								// _this.onGetDetail()
								uni.navigateBack()
							}
						})
					}
				}).catch(err => {

				})
			},
			async afterRead(event) {
				let _this = this
				let result = await upload({
					file: event.file.url,
					type: 'image',
					certificate_type: 2,
					id: _this.applet_id,
					icp_order_field: 'icp_subject.principal_info.certificate_' + event.name
				}).then(result => {
					return result;
				}).catch(err => {

				})
				let form = _this.form
				if (event.name == "photo_back") {
					_this.photo_back = [{
						url: event.file.url
					}]
					form.certificate_photo_back = result.media
					// 开始日期和结束日期
					form.certificate_validity_date_start = result.info.date_start
					form.certificate_validity_date_end = result.info.date_end
					form.certificate_photo_back_url = result.image
				}
				if (event.name == "photo_front") {
					_this.photo_front = [{
						url: event.file.url
					}]
					form.certificate_photo_front = result.media
					// 姓名 证件号码
					form.name = result.info.name
					form.certificate_number = result.info.certificate_number
					form.certificate_photo_front_url = result.image
				}
				console.log(event)
				_this.form = form
			},
			async afterReadLetter(event) {
				let _this = this
				let result = await upload({
					file: event.file.url,
					type: 'image',
					id: _this.applet_id,
					icp_order_field: 'icp_subject.principal_info.' + event.name
				}).then(result => {
					return result;
				}).catch(err => {

				})
				_this.form.authorization_letter = result.media
				_this.form.authorization_lette_url = result.image
				_this.letter = [{
					url: event.file.url
				}]
			},
			deletePic(event) {
				let _this = this
				if (event.name == "photo_front") {
					_this.photo_front = []
					_this.form.certificate_photo_front = ''
					_this.form.certificate_photo_front_url = ''
				}
				if (event.name == "photo_back") {
					_this.photo_back = []
					_this.form.certificate_photo_back = ''
					_this.form.certificate_photo_back_url = ''
				}
				if (event.name == "authorization_letter") {
					_this.letter = []
					_this.form.authorization_letter = ''
					_this.form.authorization_lette_url = ''
				}
			},
			onChangeCertificate(value) {
				let _this = this
				_this.certificate_value = value
				_this.form.certificate_type = value
			},
			onCertificateTypes() {
				let _this = this
				subjectTypes({
					id: _this.applet_id,
					type: 'certificateTypes'
				}).then(res => {
					let certificate = res.data
					let arr = []
					let index = 0
					for (let i in certificate) {
						if (_this.nature_value == certificate[i].subject_type) {
							arr[index] = certificate[i]
							index++;
						}
					}
					let map = []
					for (let i in arr) {
						let obj = {}
						obj.text = arr[i].name
						obj.value = arr[i].type
						map[i] = obj
					}
					_this.certificate = map
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 180rpx;
	}



	.item-btn {
		color: grey;
		font-size: 14px;
	}

	.u-upload__deletable {
		z-index: 1 !important;
	}

	.submit {
		width: 100%;
		position: fixed;
		bottom: 30rpx;
		z-index: 9;
		display: flex;
		flex-direction: row;
		justify-content: space-around;

		.btn {
			width: 90%;
			margin: 30rpx auto;

			.u-button {
				height: 100rpx;
			}
		}
	}

	.form {
		width: 86%;
		margin: 30rpx auto;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;

		.header {
			.title {
				font-size: 32rpx;
				font-weight: bold;

				.small {
					font-size: 22rpx;
					font-weight: normal;
				}
			}
		}

		.item {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 30rpx 0rpx;

			.label {
				width: 30%;
			}

			.value {
				width: 70%;
			}
		}
	}
</style>